<template>
  <div id="app">
    <div class="main_container" v-if="!show_setting">
      <!-- 顶部用户数据显示栏 -->
      <div class="user_message">
        <div class="zhezhao"></div>
          <!-- 用户数据的容器 -->
          <div class="user_container">
            <!-- 左侧头像部分 -->
              <div> 
                <div class="img_container">
                    <img src="/img/me_default.png" alt="">
                </div>  
              </div>
            <!-- 右侧信息部分 -->
              <div>
                <div>
                  <p  v-if="isLogin" :class="{current1:isLogin}">{{user_phone}} <a @click.prevent="loginout">退出</a></p>
                  <p v-else class="username"> <router-link to="/login">登录</router-link> <span>  |</span> <router-link to="/register">注册</router-link></p>
                  <p ><van-icon name="location-o" color="#fff" /> <span>{{user_info.address}}</span> </p>
                  <p class="fans"><span>粉丝 : </span><span> {{user_info.fans}}</span>    |   <span>关注 : </span><span> {{user_info.attention}} </span></p>
                </div>                  
              </div>
          </div>
          
      </div>
      <!-- 为了设置顶部背景 -->
      <!-- 左上角设置和分享图标 -->
      <div class="shareAndSet">
        <van-icon name="share-o" color="#f4f4f4" size="20px" @click="showShare = true"   style="margin-right:10px" /> <van-icon name="setting-o" @click="show_setting=true" style="margin-right:10px"  color="#f4f4f4" size="20px"/> 
      </div>
      <!-- 中间菜单栏 -->
      <div class="menulist">   
          <van-tabs v-model="isselect" background="#f4f4f4" line-width="60px" title-active-color="#EE2928" title-inactive-color="#666">
            <van-tab v-for="(item,index) in menulist" :key="index">
              <template #title> 
                <van-icon size="14px"/>
                {{item.title}}
                </template>
              <div v-show="index==0">
                <div class="imglist">
                  <div v-for="n in 10" :key="n">
                    <img src="@/assets/logo.webp" alt="">
                  </div>
                </div>
              </div>
              <div v-show="index==1">
                内容2
              </div>
              <div v-show="index==2">
                内容3
              </div>
              <div v-show="index==3">
                内容4
              </div>
            </van-tab>
          </van-tabs>
    
      </div>
      <!-- 下方内容区域显示 -->

    </div>
    <van-tabbar  v-model="active" active-color="#ee0a24" inactive-color="#666">
      <van-tabbar-item name="home" icon="home-o">菜谱</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">集市</van-tabbar-item>
      <van-tabbar-item name="bag" icon="bag-o">订单</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
      <div v-if="show_setting">
        <div class="settint_header">
          <van-icon name="arrow-left" @click="show_setting= false" size="20px" color="#666"/>
        </div>
        <van-cell title="账号管理" is-link />
        <van-cell title="浏览历史" is-link />
        <van-cell title="消息通知设置" is-link />
        <van-cell title="帮助与反馈" is-link value="常见问题" />
        <van-cell title="给我们好评" is-link/>
        <van-cell title="用户协议" is-link/>
        <van-cell title="隐私政策" is-link/>
        <van-cell title="关于中国美食" is-link/>
        <van-cell title="清理缓存" is-link/>
        <van-cell>
          <van-button @click="DialogMessage"  type="primary" color="#ED706C" block> 退出登录</van-button>
        </van-cell>
      </div>
  </div>
</template>

<script>


export default {
  data(){
    return{
      showShare: false,
      show_setting:false,
      user_phone:'',
      user_info:{"address":"中国大陆",
  "fans":"0",
  "attention":"0",
  "collect":[
    
  ]},
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      active:"home",
      isLogin:false,
      isselect:0,
      menulist:[
        {title:'收藏'},
        {title:'帖子'},
        {title:'菜谱'}
      ]
    }
  },
  methods: {
    loginout(){
      localStorage.removeItem('user_phone')
      this.$router.go(0)
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    DialogMessage(){
      this.$alert.confirm({
      message: '确定要退出登录',
    }).then(() => {
      
    });
    },
    checkIsLogin(){
      if(localStorage.getItem('user_phone')){
        this.isLogin = true
        this.user_phone = localStorage.getItem('user_phone')
        this.$axios.get('/users/usermessage').then(res=>{
          console.log(res);
          this.user_info = res.data.result
        })
      }
    }
  },
  mounted(){
    this.checkIsLogin()
  }
}
</script>
<style>
.van-dialog {
  width: 50vw;
  height: 25vh;
}

.van-share-sheet__options{
     justify-content: space-evenly;
   }
</style>
<style lang="scss" scoped>
@import url('/img/reset.css');
#app{
   .shareAndSet{
      width: 100vw;
      height: 3.125rem;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      padding-right: 1.25rem;
      justify-content: right;
    }
    .settint_header{
      width: 100vw;
      display: flex;
      align-items: center;
      padding-left: .625rem;
      height: 3.125rem;
    }
  .main_container{
    box-sizing: border-box;
    padding-bottom: 3.125rem;
    // height: 7.5rem;
    // 用户信息模块
    .current1{
      font-size: .9375rem;
      color: #dbc3ab;
    }
    .current{
      border-bottom: 2px solid #ee0a24;
    }
    .user_message{
      width: 100%;
      height: 60vw;
      position: sticky;
      top: 0;
      background: url('/img/VCG41184626795.jpg');
      // background: linear-gradient(to right,#aa4b6b,#6b6b83,#3b8d99);
      display: flex;
      align-items: center;
      justify-content: center;
      .zhezhao{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba($color: #000, $alpha: 0.3);
        // opacity: 0.5;
      }
      .user_container{
        width: 75%;
        height: 58%;
        display: flex;
        z-index: 100;
        a{
          margin-left: .3125rem;
          color: #fff;
        }
        // border: 1px solid #fff;
        >div:first-child{
          width: 40%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          // 图片容器的大小
          .img_container{
            width:65%;
            height: 55%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;
            img{
              width: 100%;
            }
          }
        }
        >div:last-child{
          width: 60%;
          height: 100%;
          display: flex;
          align-items: center;
          p{
            color: #f4f4f4;
            font-size: .875rem;
            margin-top: 1rem;
          }
          .fans{
            width: 10rem;
            display: flex;
            position: relative;
            top: -10px;
            left: -8px;
            justify-content: space-evenly;
            align-items: center;
            height: 2.1875rem;
          }
        }
      }
    }
    // 内容区域模块
    .imglist{
      width: 100vw;
      height: 50vh;
      padding:.625rem 1.25rem 1.25rem 1.25rem;
      box-sizing: border-box;
      overflow: scroll;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // background-color: #3b8d99;
      >div{
        width: 42vw;
        margin-top: 1.25rem;
        img{
          width: 100%;
        }
      }
    }
  }
}
  
</style>
